import React, { useState, useEffect } from 'react'
function getRandomIntInclusive(min, max) {
  // const [x, setX] = useState(0)
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min + 1)) + min //含最大值，含最小值
}
// class Demo extends React.Compnent {
//   render() {
//     const [x, setX] = useState(0)
//     return <div></div>
//   }
// }
export default function Test() {
  const [msg, setMsg] = useState('hello')
  const [c, setC] = useState(0)
  // for (let i = 0; i < 10; i++) {
  //   const [msg, setMsg] = useState('hello')
  //   const [c, setC] = useState(0)
  // }

  // 错误:
  // if(true){
  //   const [msg, setMsg] = useState('hello')
  //   const [c, setC] = useState(0)
  // }
  // useEffect模拟了类组件中的三个声明周期钩子函数componentDidMount,compnentDidUpdate,componentWillUnmount
  // 外部的函数模拟的是挂载和更新
  // 内部的函数模拟的是卸载
  useEffect(() => {
    console.log('test组件挂载或更新了')
    // PubSub.subscribe()
    return () => {
      console.log('test组件卸载了')
      //   PubSub.unsubscribe()
    }
  }, [c])
  return (
    <div>
      Test
      <br />
      <p>{c}</p>
      <p>{msg}</p>
      <button
        onClick={() => {
          setMsg('hook')
        }}
      >
        修改msg
      </button>
      <button
        onClick={() => {
          setC(getRandomIntInclusive(1, 2))
        }}
      >
        +
      </button>
    </div>
  )
}
